<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{width:`${isCollapse?65:240}px`, transition: '0.4s'}">
        <el-menu 
        router
          default-active="index"
          background-color="#345"
          text-color="#bbb"
          :style="{height: '100vh'}"
          :collapse="isCollapse"
          class="el-menu-vertical-demo">
          <el-menu-item>
            <img width="30px" src="../assets/logo.jpg" alt="">
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;全民医保后台管理</span>
            </template>
          </el-menu-item>

          <template v-for="item in menu">
          <el-menu-item
          :link="item.m_link" :key="item.m_title"
           v-if="item.type=='menu-item'">
            <template slot="title">
              <i :class="item.m_icon"></i>
              {{item.m_title}}
            </template>
          </el-menu-item>
          <!-- 如果发现item是一个submenu 则: -->
          <el-submenu v-else :index="item.m_link">
            <template slot="title">
              <i :class="item.m_icon"></i>
              <span slot="title">{{item.m_title}}</span>
            </template>
            <!-- submenu菜单的列表项 -->
            <el-menu-item v-for="item2 in item.children" :index="item2.m_link" :key="item2.m_title">
              <i :class="item2.m_icon"></i>
              <span slot="title">{{item2.m_title}}</span>
            </el-menu-item>
          </el-submenu>
        </template>

          <!-- <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">医生管理</span>
            </template>
            <el-menu-item index="/home/doctor-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">医生列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">药品管理</span>
            </template>
            <el-menu-item index="/home/drug-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">药品列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">健康知识管理</span>
            </template>
            <el-menu-item index="/home/new-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">健康知识列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">体检套餐管理</span>
            </template>
            <el-menu-item index="/home/package-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">体检套餐列表</span>
            </el-menu-item>
          </el-submenu> -->

        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>
          <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医院列表</el-breadcrumb-item>
    </el-breadcrumb> -->
          
    <template v-if="user">
            <span>{{ user.role_nickname }}</span
            >| <span>{{ user.role_username }}</span
            >| <span>{{ user.role_email }}</span
            >|
            <span>{{ cityname }}</span>
          </template>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import httpApi from '@/http';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      isCollapse: false,
      menu:[],// 用户权限拥有的菜单栏
    }
  },
  computed: {
    // ... 对象展开运算符
    ...mapState(["user", "cityname"]),
  },
  mounted(){
    let params = {role_id:this.user.id,user_id:this.user.id}
       httpApi.adminApi.queryRights(params).then(res =>{
        console.log(res);
        this.menu = res.data.data.result2
        console.log('2222222222',this.menu);
        console.log('1111111111',this.menu[1].children[0].m_link);
       })
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }
</style>
